<template>
          <!-- <a-carousel effect="fade" class="carousel">
            <div v-for="(item,index) in imgList" :key="index" class="funck"><img :src="item"/></div>

        </a-carousel> -->
            <!-- <div><img src="@/assets/sc.jpg"/></div>
            <div><img src="@/assets/scs.jpg"/></div> -->
         <a-carousel autoplay effect="fade" class="carousel">
            <div v-for="(item,index) in imgList" :key="index" class="funck">
                <img title="素材来自暴龙官网" :src="require(`@/assets/${item}`)" />
            </div>
         </a-carousel>
         <div class="blockItem">
            <h1>Special introduction</h1>
           <a-row :gutter="['16','16']">
             <a-col class="duction" :xs="24" :md="12" :lg="12" v-for="(item,index) in imgPackg" :key="index">
               <div id="infomat">
                <img :src="item.img" />
                <div class="shows">
                <h2>{{item.tit}}</h2>
                <div>{{item.span}}</div>
              </div>
              </div>
             </a-col>
           </a-row>
         </div>
         <div class="hasItem">
              <h1>Why choose us</h1>
              <a-row :gutter='10'>
                <a-col :xs='12' :md='6' :lg='6' v-for="(item,index) in itemList" :key="index">
                      <div class="info">
                     <img :src="item.img" />
                     <h3>{{item.tit}}</h3>
                     <div>{{item.info}}</div>
                </div>
                </a-col>
              </a-row>
         </div>
         <div class="comper">
           <h1>Business</h1>
           <a-row>
             <a-col :xs='24' :md='12' :lg='12'>
                  <div id="china" style="width:100%;height:300px"></div>
             </a-col>
             <a-col :xs='24' :md='12' :lg='12'>
          <a-descriptions
            title="Responsive Descriptions"
            bordered
            :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
          >
            <a-descriptions-item label="项目">Lizer-glasses</a-descriptions-item>
            <a-descriptions-item label="合作电话">89898899</a-descriptions-item>
            <a-descriptions-item label="总部">重庆</a-descriptions-item>
            <a-descriptions-item label="详细地址">重庆市渝中区解放碑收复台湾89号</a-descriptions-item>
            <a-descriptions-item label="关于">
              眼镜的设计越来越多样化和精美，可以满足不同人的需求和喜好。你可以选择简约的款式，展现出自己的优雅和知性；也可以选择个性十足的款式，展现出自己的个性和独特魅力。
            </a-descriptions-item>
          </a-descriptions>
             </a-col>
           </a-row>
         </div>
         <Footer></Footer>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import Footer from '@/components/footer.vue'
import axios from 'axios'
import * as echarts from 'echarts'
import { chinaJson } from '@/assets/Json/china'
export default defineComponent({
  components: {
    Footer
  },
  setup () {
    const imgList = reactive<string[]>([
      'sc.jpg',
      'scs.jpg'
    ])
       interface ImgPackg {
        img: string;
        tit: string;
        span: string;
    }

    interface ItemList {
        img: string;
        tit: string;
        span: string;
    }
    let imgPackg = reactive<ImgPackg[]>([])
    let itemList = reactive<ItemList[]>([])
    const getIntro = () => {
      axios.get('/getIntro').then((res) => {
        // console.log(res, 'res')
        imgPackg = imgPackg.splice(0, imgPackg.length, ...res.data.dataList)
      })
    }
    const getItemList = () => {
      axios.get('/getItem').then((res) => {
        //  console.log(res, 'res')
        itemList = itemList.splice(0, itemList.length, ...res.data.dataList)
      })
    }

    const regMap = () => {
      // const mapid = document.getElementById('china')
      echarts.registerMap('china', chinaJson as unknown as string)
      // public main: HTML
      const main = document.getElementById('china') as HTMLElement
      const myChart = echarts.init(main)
      myChart.setOption({
        title: {
          text: '中国业务分布点',
          textStyle: {
            color: '#409EFF',
            fontStyle: 'normal'
          }
        },
        visualMap: {
          min: 0, // 最小值
          max: 20000, // 最大值
          text: ['20000', '0'],
          realtime: false,
          calculable: false,
          inRange: {
            color: ['#e6f7ff', '#1890FF', '#0050b3'] // 渐变颜色
          }
        },
        tooltip: {
          formatter: function (params:{name:string}) {
            // console.log(params);
            return (
              params.name
            )
          }
        },
        geo: {
          show: true,
          map: 'china',
          zoom: 1.2,
          itemStyle: {
            label: {
              show: false, // 默认是否显示省份名称
              axisName: {
                color: '#ffffff'
              }
            },
            areaColor: '#3EABFF', // 背景颜色
            borderWidth: 1,
            borderColor: '#fff'

          },
          select: {
            itemStyle: {
              areaColor: '#409EFF',
              color: '#fff'
            }
          },
          emphasis: {
            label: {
              show: true, // 选中状态是否显示省份名称
              textStyle: {
                color: '#000000'
              }
            },
            borderColor: '#fff',
            areaColor: '#409EFF',
            areaStyle: {
              color: '#409EFF' // 选中状态的地图板块颜色
            }
          }
        },
        series: [
          {
            type: 'effectScatter',
            map: 'china',
            coordinateSystem: 'geo',
            zoom: 1.2,

            data: [
              {
                name: '北京', // 数据项名称，在这里指地区名称
                value: [ // 数据项值
                  116.46, // 地理坐标，经度
                  39.92, // 地理坐标，纬度
                  340 // 北京地区的数值
                ],
                tooltip: {
                  show: true,
                  trigger: 'item', // 数据项图形触发
                  backgroundColor: '#fff', // 提示框浮层的背景颜色。
                  borderColor: 'rgba(0,0,0,0)',
                  formatter: function (params:any) {
                    // return 'Top1<br><br>{b}：' + params,
                  }

                },
                label: {
                  normal: {
                    show: true, // 显示省份标签
                    position: 'right',
                    textStyle: {
                      color: '#0041D2' // 标签字体颜色
                    },
                    formatter: '{b}'
                  }
                },
                rippleEffect: { // 涟漪特效相关配置
                  brushType: 'stroke'// 波纹的绘制方式，可选 'stroke' 和 'fill'
                }
              },

              { name: '海门', value: [121.15, 31.89, 90] },

              { name: '杭州', value: [118.21, 120.30, 50] },
              { name: '鄂尔多斯', value: [109.781327, 39.608266, 120] },
              { name: '招远', value: [120.38, 37.35, 142] },
              { name: '重庆', value: [106.55, 29.57, 242] },
              { name: '上海', value: [120.51, 30.40, 142] },
              { name: '维吾尔自治区', value: [87.6177, 43.7928, 242] },
              { name: '哈尔滨', value: [126.63, 45.75, 242] }
            ]
          }
        ]
      })
    }

    getIntro()
    getItemList()

    onMounted(() => {
      regMap()
    })
    return {
      imgList,
      imgPackg,
      itemList
    }
  }
})
</script>
<style scoped lang="less">
.head {
  justify-content: flex-end;
}
.layout{
    height: 100%;
    .ant-layout-header{
      padding: 0;
    }
}
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 100%;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
.carousel{
    height: 100%;
}
.ant-carousel .slick-slide img{
  width: 100%;
}

@media screen and (max-width: 768px) {
  .blockItem{
    padding: 10px;
    width: 100%;
    margin: 0 auto;
    img{
      width: 100%;
    }
  }
  .shows h2{
    font-size: 30px;
    text-align: left;
    color: rgb(0, 0, 0);
    margin: 0;
  }
  .shows div{
    text-align: left;
  }
  .hasItem{
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .blockItem{
    padding: 10px;
    width: 100%;
    margin: 0 auto;
    img{
      width: 100%;
    }
  }
  .shows h2{
    font-size: 30px;
    text-align: left;
    color: rgb(0, 0, 0);
    margin: 0;
  }
  .shows div{
    text-align: left;
  }
  .hasItem{
    width: 80%;
  }
}
@media screen and (min-width: 1024px) {
  .blockItem{
    padding: 10px;
    width: 80%;
    margin: 0 auto;
    img{
      width: 100%;
    }
    h1{
      padding: 20px 0px;
      text-align: center;
      color: rgb(190, 16, 16);
    }
  }
  #infomat{
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;

}
.shows{
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: -120px;
    transition: all 1s ease 0s;
}
.shows h2{
    font-size: 30px;
    text-align: left;
    color: white;
}
.shows div{
  text-indent: 33px;
  margin-top: 20px;
  opacity: 0;
  margin-left: 30px;
  width: 80%;
  color: white;
}
.info img{
  padding: 20px 0px;
}
.info div{
  width: 70%;
  text-indent: 40px;
  margin:  0 auto;
  text-align: left;
}
.duction{
  width: 500px;
  overflow: hidden;
  img{
     transition: all 0.6s ease;
  }
}
.duction:hover{
  img{
    transform: scale(1.05);
  }
  .shows{
    bottom: -50px;
    transition: all 1s;
    background: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 70%);
    z-index: 3;
    // background-color: red;
  }
  .shows div{
    opacity: 1;
    transition: all 1s;
  }
}

#infomat{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.hasItem{
  width: 80%;
}
.comper{
  width: 80%;
}
}
.comper{
  margin: 0 auto;
}
.hasItem {
  margin: 0 auto;
}
.hasItem h1{
    padding: 20px 0px;
    text-align: center;
}
.info {
    width: 100%;
    height: 300px;
    text-align: center;
}
.info h3{
    padding: 20px 0px;
}
.info img{
    width: 100px;
}
.info h3:hover{
    color: #E03A3C;
}
</style>

function encrypt(arg0: string): any {
  throw new Error('Function not implemented.')
}

function encrypt(arg0: string): any {
  throw new Error('Function not implemented.')
}
